<template>
    <div class="app_container">
        <el-row :gutter="40">
            <el-col :span="18">
                <el-descriptions direction="vertical" :column="5" border>
                    <el-descriptions-item label="审核时间">{{ info.auditTime }}</el-descriptions-item>
                    <el-descriptions-item label="审核备注">{{ info.auditRemark }}</el-descriptions-item>
                    <el-descriptions-item label="审核状态">{{ info.statusText }}</el-descriptions-item>
                </el-descriptions>
                <br>

                <el-descriptions direction="vertical" :column="4" border>
                    <el-descriptions-item label="创建时间">{{ info.createTime }}</el-descriptions-item>
                    <el-descriptions-item label="船队ID">{{ info.cid }}</el-descriptions-item>
                    <el-descriptions-item label="船只名称">{{ info.name }}</el-descriptions-item>
                    <el-descriptions-item label="所属船队">{{ info.captainName }}</el-descriptions-item>
                    <el-descriptions-item label="船只照片">
                        <el-image v-for="(item, index) in info.additional" :key="index" :src="item" fit="contain" :preview-src-list="info.additional" :initial-index="index"></el-image>
                    </el-descriptions-item>
                </el-descriptions>
                <br>

                <el-descriptions direction="vertical" :column="4" border>
                    <el-descriptions-item label="救生圈数量">{{ info.rescueCircleCount }}</el-descriptions-item>
                    <el-descriptions-item label="救生圈照片">
                        <el-image v-for="(item, index) in info.rescueCircleImages" :key="index" :src="item" fit="contain" :preview-src-list="info.rescueCircleImages" :initial-index="index"></el-image>
                    </el-descriptions-item>
                    <el-descriptions-item label="救生衣数量">{{ info.rescueClothesCount }}</el-descriptions-item>
                    <el-descriptions-item label="救生衣照片">
                        <el-image v-for="(item, index) in info.rescueClothesImages" :key="index" :src="item" fit="contain" :preview-src-list="info.rescueClothesImages" :initial-index="index"></el-image>
                    </el-descriptions-item>
                </el-descriptions>
                <br>

                <el-descriptions direction="vertical" :column="5" border>
                    <el-descriptions-item label="船只型号">{{ info.model }}</el-descriptions-item>
                    <el-descriptions-item label="总钓位数">{{ info.seatTotalQuality }}</el-descriptions-item>
                    <el-descriptions-item label="钓位价格">{{ info.price }}</el-descriptions-item>
                    <el-descriptions-item label="包船价格">{{ info.charterPrice }}</el-descriptions-item>
                    <el-descriptions-item label="船上服务介绍">{{ info.shipService }}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{ info.applyRemark }}</el-descriptions-item>
                    <el-descriptions-item label="船只证件">
                        <el-image v-for="(item, index) in info.dataPackage" :key="index" :src="item" fit="contain" :preview-src-list="info.dataPackage" :initial-index="index"></el-image>
                    </el-descriptions-item>
                </el-descriptions>
                <br>

                <el-descriptions direction="vertical" :column="3" border>
                    <el-descriptions-item label="码头名称">{{ info.wharfName }}</el-descriptions-item>
                    <el-descriptions-item label="码头地址">{{ info.wharfAddress }}</el-descriptions-item>
                    <el-descriptions-item label="码头经纬度">{{ info.wharfLongitude }},{{ info.wharfLatitude }}</el-descriptions-item>
                </el-descriptions>
                <br>
            </el-col>
            <el-col :span="6">
                <el-descriptions title="操作" direction="vertical" :column="3" border></el-descriptions>
                <div>
                    <el-button v-role="['/shipInfo/audit/']" type="success" @click="onSet('NORMAL')" v-if="info.status != 'NORMAL'">通过</el-button>
                    <el-button v-role="['/shipInfo/audit/']" type="danger" @click="onSet('REJECTED')" v-if="info.status != 'REJECTED'">驳回</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { apiPublishDetail, apiShipAudit } from "@/api/captainManage.js";
export default {
    data() {
        return {
            item_id: '',
            info: {},
            delText: '',
        }
    },
    created() {
        const { id } = this.$route.query
        this.item_id = id
        this.getData()
    },
    methods: {
        getData() {
            apiPublishDetail(this.item_id).then(({ data }) => {
                switch (data.status) {
                    case 'NORMAL':
                        data.statusText = '正常'
                        break;
                    case 'CHECKING':
                        data.statusText = '待审核'
                        break;
                    case 'REJECTED':
                        data.statusText = '审核驳回'
                        break;
                    case 'FORBIDDEN':
                        data.statusText = '禁用'
                        break;
                }
                this.info = data
            });
        },
        // 设置
        onSet(status) {
            let msg = ''
            switch (status) {
                case 'NORMAL':
                    msg = '通过'
                    break;
                case 'REJECTED':
                    msg = '驳回'
                    break;
            }
            this.$prompt('审核备注（选填）', '提示', {
                cancelButtonText: "取消",
                confirmButtonText: `确认${msg}`,
                // inputPattern: /[^\s]/,
                // inputErrorMessage: "驳回原因不能为空",
            }).then(({ value }) => {
                apiShipAudit(this.item_id, { status, remark: value }).then((res) => {
                    this.$message({ type: "success", message: res.message });
                    this.getData()
                }).catch((err) => {
                    this.$message({ type: "error", message: err });
                    console.log(err);
                });
            }).catch(() => {
                // 点击取消
            });
        },
    },
}
</script>

<style>
.el-image {
    width: 150px;
    height: 150px;
    margin: 4px 10px 4px 0;
}
</style>